<template>
  <div class="user-dashboard">
    <!-- 顶部导航栏 -->
    <header class="dashboard-header">
      <div class="header-container">
        <div class="logo">
          <h1>洗护到家</h1>
        </div>
        <nav class="main-nav">
          <el-menu
            :default-active="activeMenu"
            mode="horizontal"
            @select="handleMenuSelect"
            class="nav-menu"
          >
            <el-menu-item index="home">
              <el-icon><House /></el-icon>
              <span>服务主页</span>
            </el-menu-item>
            <el-menu-item index="orders">
              <el-icon><List /></el-icon>
              <span>我的订单</span>
            </el-menu-item>
            <el-menu-item index="messages">
              <el-icon><ChatDotRound /></el-icon>
              <span>消息中心</span>
              <el-badge :value="unreadCount" :hidden="unreadCount === 0" />
            </el-menu-item>
            <el-menu-item index="profile">
              <el-icon><User /></el-icon>
              <span>个人中心</span>
            </el-menu-item>
          </el-menu>
        </nav>
        <div class="user-actions">
          <el-dropdown @command="handleUserAction">
            <span class="user-info">
              <el-avatar :size="32" :src="userInfo.avatar">
                {{ userInfo.username?.charAt(0) }}
              </el-avatar>
              <span class="username">{{ userInfo.username }}</span>
              <el-icon><ArrowDown /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="settings">
                  <el-icon><Setting /></el-icon>
                  设置
                </el-dropdown-item>
                <el-dropdown-item command="logout" divided>
                  <el-icon><SwitchButton /></el-icon>
                  退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="dashboard-main">
      <div class="main-container">
        <!-- 服务主页 -->
        <div v-if="activeMenu === 'home'" class="content-section">
          <div class="welcome-section">
            <h2>欢迎回来，{{ userInfo.username }}！</h2>
            <p>选择您需要的洗护服务</p>
          </div>

          <!-- 快速服务入口 -->
          <div class="quick-services">
            <h3>热门服务</h3>
            <div class="services-grid">
              <div 
                v-for="service in availableServices" 
                :key="service.id"
                class="service-card"
                @click="selectService(service)"
              >
                <div class="service-icon">{{ service.icon }}</div>
                <h4>{{ service.name }}</h4>
                <p>{{ service.description }}</p>
                <div class="service-price">
                  起价 ¥{{ service.startPrice }}
                </div>
              </div>
            </div>
          </div>

          <!-- 推荐商家 -->
          <div class="recommended-merchants">
            <h3>推荐商家</h3>
            <div class="merchants-grid">
              <div 
                v-for="merchant in recommendedMerchants" 
                :key="merchant.id"
                class="merchant-card"
                @click="viewMerchant(merchant)"
              >
                <div class="merchant-avatar">
                  <el-avatar :size="60" :src="merchant.avatar">
                    {{ merchant.name.charAt(0) }}
                  </el-avatar>
                </div>
                <div class="merchant-info">
                  <h4>{{ merchant.name }}</h4>
                  <div class="merchant-rating">
                    <el-rate v-model="merchant.rating" disabled show-score />
                  </div>
                  <p>{{ merchant.description }}</p>
                  <div class="merchant-tags">
                    <el-tag 
                      v-for="tag in merchant.tags" 
                      :key="tag"
                      size="small"
                    >
                      {{ tag }}
                    </el-tag>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 我的订单 -->
        <div v-else-if="activeMenu === 'orders'" class="content-section">
          <h2>我的订单</h2>
          <el-tabs v-model="orderTab" class="order-tabs">
            <el-tab-pane label="全部订单" name="all">
              <div class="order-list">
                <div v-if="orders.length === 0" class="empty-state">
                  <el-empty description="暂无订单" />
                </div>
                <div v-else>
                  <!-- 订单列表将在这里显示 -->
                  <p>订单功能开发中...</p>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="待付款" name="pending">待付款订单</el-tab-pane>
            <el-tab-pane label="进行中" name="processing">进行中订单</el-tab-pane>
            <el-tab-pane label="已完成" name="completed">已完成订单</el-tab-pane>
          </el-tabs>
        </div>

        <!-- 消息中心 -->
        <div v-else-if="activeMenu === 'messages'" class="content-section">
          <h2>消息中心</h2>
          <div class="messages-container">
            <div v-if="messages.length === 0" class="empty-state">
              <el-empty description="暂无消息" />
            </div>
            <div v-else>
              <!-- 消息列表将在这里显示 -->
              <p>消息功能开发中...</p>
            </div>
          </div>
        </div>

        <!-- 个人中心 -->
        <div v-else-if="activeMenu === 'profile'" class="content-section">
          <h2>个人中心</h2>
          <div class="profile-container">
            <div class="profile-info">
              <el-avatar :size="80" :src="userInfo.avatar">
                {{ userInfo.username?.charAt(0) }}
              </el-avatar>
              <div class="user-details">
                <h3>{{ userInfo.username }}</h3>
                <p>{{ userInfo.email }}</p>
                <p>{{ userInfo.mobile }}</p>
              </div>
            </div>
            <div class="profile-actions">
              <el-button type="primary">编辑资料</el-button>
              <el-button>修改密码</el-button>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'
import { 
  House, List, ChatDotRound, User, ArrowDown, 
  Setting, SwitchButton 
} from '@element-plus/icons-vue'

const router = useRouter()
const userStore = useUserStore()

// 响应式数据
const activeMenu = ref('home')
const orderTab = ref('all')
const unreadCount = ref(3)

// 计算属性
const userInfo = computed(() => userStore.userInfo || {
  username: '用户',
  email: 'user@example.com',
  mobile: '138****8888',
  avatar: ''
})

// 可用服务
const availableServices = ref([
  {
    id: 1,
    name: '衣物洗护',
    icon: '👔',
    description: '日常衣物专业洗护',
    startPrice: 15
  },
  {
    id: 2,
    name: '鞋类清洗',
    icon: '👟',
    description: '运动鞋皮鞋专业清洗',
    startPrice: 25
  },
  {
    id: 3,
    name: '家纺洗护',
    icon: '🛏️',
    description: '床品窗帘地毯洗护',
    startPrice: 35
  },
  {
    id: 4,
    name: '奢侈品护理',
    icon: '👜',
    description: '名牌包包皮具护理',
    startPrice: 80
  }
])

// 推荐商家
const recommendedMerchants = ref([
  {
    id: 1,
    name: '洁净洗护中心',
    avatar: '',
    rating: 4.8,
    description: '专业洗护15年，服务优质',
    tags: ['快速取送', '品质保证', '价格实惠']
  },
  {
    id: 2,
    name: '精品护理店',
    avatar: '',
    rating: 4.9,
    description: '高端洗护专家，奢侈品护理',
    tags: ['奢侈品', '专业护理', '信誉保证']
  }
])

// 订单和消息数据
const orders = ref([])
const messages = ref([])

// 方法
const handleMenuSelect = (index) => {
  activeMenu.value = index
}

const handleUserAction = (command) => {
  if (command === 'logout') {
    userStore.logout()
    ElMessage.success('已退出登录')
    router.push('/')
  } else if (command === 'settings') {
    ElMessage.info('设置功能开发中')
  }
}

const selectService = (service) => {
  ElMessage.info(`选择了${service.name}服务，功能开发中`)
}

const viewMerchant = (merchant) => {
  ElMessage.info(`查看${merchant.name}详情，功能开发中`)
}

onMounted(() => {
  // 检查用户是否已登录（延迟检查，给状态更新时间）
  setTimeout(() => {
    if (!userStore.isLoggedIn && !userStore.token) {
      console.log('用户未登录，重定向到登录页面')
      router.push('/login')
    } else {
      console.log('用户已登录，显示用户中心')
    }
  }, 100)
})
</script>

<style scoped>
.user-dashboard {
  min-height: 100vh;
  background: #f5f7fa;
}

.dashboard-header {
  background: white;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.logo h1 {
  margin: 0;
  color: #409eff;
  font-size: 1.5rem;
}

.nav-menu {
  border: none;
  background: transparent;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: background-color 0.3s;
}

.user-info:hover {
  background: #f5f7fa;
}

.username {
  font-weight: 500;
  color: #303133;
}

.dashboard-main {
  padding: 2rem 0;
}

.main-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.content-section {
  background: white;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.welcome-section {
  text-align: center;
  margin-bottom: 3rem;
}

.welcome-section h2 {
  color: #303133;
  margin-bottom: 0.5rem;
}

.welcome-section p {
  color: #909399;
}

.quick-services,
.recommended-merchants {
  margin-bottom: 3rem;
}

.quick-services h3,
.recommended-merchants h3 {
  color: #303133;
  margin-bottom: 1.5rem;
  font-size: 1.3rem;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.service-card {
  text-align: center;
  padding: 1.5rem;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.service-card:hover {
  border-color: #409eff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
}

.service-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.service-card h4 {
  margin-bottom: 0.5rem;
  color: #303133;
}

.service-card p {
  color: #909399;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.service-price {
  color: #f56c6c;
  font-weight: bold;
}

.merchants-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.merchant-card {
  display: flex;
  padding: 1.5rem;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.merchant-card:hover {
  border-color: #409eff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
}

.merchant-avatar {
  margin-right: 1rem;
}



.merchant-info {
  flex: 1;
}

.merchant-info h4 {
  margin-bottom: 0.5rem;
  color: #303133;
}

.merchant-rating {
  margin-bottom: 0.5rem;
}

.merchant-info p {
  color: #909399;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.merchant-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.empty-state {
  text-align: center;
  padding: 3rem 0;
}

.profile-container {
  max-width: 600px;
}

.profile-info {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.user-details h3 {
  margin-bottom: 0.5rem;
  color: #303133;
}

.user-details p {
  color: #909399;
  margin-bottom: 0.25rem;
}

.profile-actions {
  display: flex;
  gap: 1rem;
}
</style>
